<template>
    <div id="login">
        <h3>登录</h3>
        <div>
            <el-form :inline="true" :model="loginBean" :rules="loginRules" ref="login">
                <el-form-item label="账号" prop="userAccount">
                    <el-input prefix-icon="el-icon-postcard" v-model="loginBean.userAccount" placeholder="请输入账号"
                              clearable
                              autofocus></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userPassword">
                    <el-input type="password" prefix-icon="el-icon-postcard" v-model="loginBean.userPassword"
                              placeholder="请输入密码"
                              show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button plain @click="login">登&nbsp;&nbsp;录</el-button>
                    <span @click="toRegister" id="toRegister">&nbsp;&nbsp;没有账号？点击注册</span>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    name: 'login',
    data() {
      return {
        loginBean: {
          userAccount: '',
          userPassword: ''
        },
        loginRules: {
          userAccount: [
            {required: true, message: '请输入您的账号', trigger: 'blur'}
          ],
          userPassword: [
            {required: true, message: '请输入您的密码', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      console.log('登录 -> created')
    },
    methods: {
      login() {
        this.$refs['login'].validate((v) => {
          if (v) {
            console.log(this.loginBean)
            this.axios.post('/qs/user/login', this.loginBean).then(
              response => {
                if (response.data && response.data.code === 200) {
                  var user = JSON.stringify(response.data.data)
                  Vue.prototype.$ENV = user
                  sessionStorage.ENV = user
                  this.$router.push('/')
                } else {
                  console.error(response.data.message)
                }
              }, error => {
                console.error(error)
              })
          } else {
            return false;
          }
        });
      },
      toRegister() {
        this.$router.push({
          path: '/register'
        })
      }
    }
  }
</script>

<style>
    #login {
        height: 100%;
        width: 20%;
    }

    #toRegister {
        cursor: pointer;
        color: green;
        font-size: smaller;
    }
</style>
